<!--
 * @Description: 高德地图点位选择组件
 * @Author: chendingfengmail@163.com
 * @Date: 2022-01-11 16:42:51
 * @LastEditTime: 2022-01-12 10:19:13
 * @LastEditors: chendingfengmail@163.com
 * @Reference: 
-->
<!-- 高德地图点位组件 -->
<template>
  <el-amap
    ref="map"
    vid="amapDemo"
    :center="mapInfo.lnglat"
    :amap-manager="amapManager"
    :zoom="zoom"
    :events="events"
    :plugin="plugins"
  >
    <el-amap-marker ref="marker" vid="component-marker" :position="mapInfo.lnglat"></el-amap-marker>
  </el-amap>
</template>

<script>
import { AMapManager } from 'vue-amap';
let amapManager = new AMapManager();
export default {
  name: 'ddMapLocation',
  props: {
    // 搜索地址输入框dom元素的ID
    tipInputId: {
      type: String,
      default: () => {
        return '';
      },
    },
    // 地图默认中心点位置
    mapInfo: {
      type: Object,
      default: () => {
        return {
          address: '佛山市禅城区人民政府',
          lnglat: [113.122532, 23.009475],
        };
      },
    },
    // 是否为预览模式（true为禁止搜索和点选）
    preview: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
  },
  data() {
    return {
      titleName: '详情',
      formLabelWidth: '100px',
      amapManager,
      zoom: 12,
      plugins: ['Geocoder', 'Autocomplete', 'PlaceSearch'],
    };
  },

  watch: {
    preview(val) {
      console.log('preview', val);
    },
  },

  computed: {
    events() {
      if (!this.preview) {
        return {
          init: () => {
            if (this.tipInputId != '') {
              this.initMapByInput();
            }
          },
          click: (e) => {
            this.mapInfo.lnglat = [e.lnglat.lng, e.lnglat.lat];
            this.getFormattedAddress();
          },
        };
      } 
      return {};
    },
  },

  mounted() {
    // console.log("events", this.events);
  },

  methods: {
    getFormattedAddress() {
      AMap.plugin('AMap.Geocoder', () => {
        let GeocoderOptions = {
          city: '全国',
        };
        let geocoder = new AMap.Geocoder(GeocoderOptions);
        geocoder.getAddress(this.mapInfo.lnglat, (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            let locationInfo = {
              lnglat: this.mapInfo.lnglat,
              address: result.regeocode.formattedAddress,
            };
            // 将位置信息传递给父组件
            this.$emit('getLocationInfo', locationInfo);
          } else {
            this.$emit('getLocationInfo', '无法获取地址');
          }
        });
      });
    },

    initMapByInput() {
      AMap.plugin('AMap.Autocomplete', () => {
        let autoOptions = {
          city: '全国',
          input: this.tipInputId,
        };
        let autoComplete = new AMap.Autocomplete(autoOptions);
        AMap.event.addListener(autoComplete, 'select', (e) => {
          this.mapInfo.lnglat = [e.poi.location.lng, e.poi.location.lat];
          this.getFormattedAddress();
        });
      });
    },
  },
};
</script>
<style lang='scss' scoped>
</style>